<template>
  <router-link
    :to="'/product?id=' + product.id"
    class="drop-i m-1 sm:m-2.5 pb-1"
    data-v-cdb33666=""
    data-v-0ac44673=""
    style="order: 0"
  >
    <div
      class="drop w-[100px] h-[100px] sm:w-[180px] sm:h-[180px] bg-white box-border relative text-center rounded-lg transition-all overflow-hidden shadow-sm group"
      data-v-cdb33666=""
    >
      <div
        class="w-full h-[58%] bg-no-repeat bg-contain bg-center group-hover:opacity-0 absolute top-[5%]"
        data-v-cdb33666=""
        :style="`background-image: url('${product.thumb}');`"
      ></div>
      <div
        class="w-full h-full absolute bg-no-repeat bg-cover bg-center opacity-0 group-hover:opacity-100"
        data-v-cdb33666=""
        :style="`background-image: url('${product.good_images}'); background-color: rgb(255, 255, 255);`"
      >
        <div
          class="w-full h-[40px] leading-[40px] bottom-[50%] text-sm bg-black-50 text-white absolute translate-y-1/2"
          data-v-cdb33666=""
        >
          {{ product.pirce }}
        </div>
      </div>
      <div
        class="h-[40px] group-hover:opacity-0 whitespace-nowrap text-center flex absolute bottom-[6%]"
        data-v-cdb33666=""
      >
        <span
          class="leading-tight text-[8px] sm:text-xs absolute inset-x-0 bottom-0 pl-3 font-bold"
          data-v-cdb33666=""
        >
          <div>{{ product.goods_name }}</div>
        </span>
      </div>
      <svg
        class="absolute -bottom-2 left-0 text-rarities-5"
        width="100%"
        height="22"
        viewBox="0 0 180 8"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
        data-v-cdb33666=""
      >
        <path
          opacity="0.2"
          d="M180 0L90 5.33333V8H180V0Z"
          data-v-cdb33666=""
        ></path>
        <path opacity="0.6" d="M0 0L180 6V8H0V0Z" data-v-cdb33666=""></path>
      </svg>
    </div>
  </router-link>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      default: () => ({
        id: 128,
        goods_name:
          "Louis Vutton by Virgil Abloh Mini Soft Trunk小方包经典老花百搭潮酷单肩斜挎包",
        pirce: "46408.00",
        good_images:
          "http://box003.oss-cn-shanghai.aliyuncs.com/box006/258ba53eeb31db95ce81d65d32d76332.jpg",
        stock: 999,
        images: [
          "http://box003.oss-cn-shanghai.aliyuncs.com/box006/258ba53eeb31db95ce81d65d32d76332.jpg",
        ],
        thumb:
          "http://box003.oss-cn-shanghai.aliyuncs.com/box006/258ba53eeb31db95ce81d65d32d76332.jpg",
      }),
    },
  },
};</script>
</script>
